<template>
  <BaseDialog
    title="素材信息"
    width="50"
    :dialog-show.sync="dialogShow"
    footer
    @submit="submit"
    @cancel="handleClose"
  >
    <el-form
      label-position="top"
      :rules="formRules"
      ref="materialForm"
      :model="materialForm"
    >
      <el-form-item label="素材编号">
        <el-input
          placeholder="请输入素材编号"
          v-model="materialForm.material_no"
        />
      </el-form-item>
      <el-form-item label="素材名称" prop="material_name">
        <el-input
          placeholder="请输入素材名称"
          v-model="materialForm.material_name"
        />
      </el-form-item>
      <el-form-item
        :label="materialType == 1 ? '素材网址' : '素材文件'"
        prop="material_link"
      >
        <el-input
          placeholder="请输入素材网址"
          v-model="materialForm.material_link"
          v-if="materialType == 1"
        />
        <el-upload
          v-else
          ref="upload"
          class="files-upload"
          :headers="headers"
          :action="$store.getters.updateURL + 'attachment/uploadAndSave'"
          :on-success="handleUploadSuccess"
          :before-upload="handleBeforeUpload"
          :on-exceed="handelExceed"
          :limit="1"
          :file-list="fileList"
          :show-file-list="true"
        >
          <el-button>上传素材</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传{{ filesType }}文件
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="素材封面">
        <BaseUpload
          :limit="1"
          v-model="material_cover"
          :show-list="false"
          description=""
          @success="success"
          ref="coverUpload"
        >
          <div class="attachment_imgBox">
            <img
              :src="materialForm.material_cover"
              v-if="materialForm.material_cover"
              alt=""
              class="material-cover"
            />
            <i class="el-icon-camera" v-else />
            <span v-if="materialForm.material_cover" class="img-actions">
              <span @click.stop="handleRemove(1)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </BaseUpload>
      </el-form-item>
      <el-form-item label="使用网址" prop="material_url">
        <el-input
          placeholder="请输入使用网址"
          v-model="materialForm.material_url"
        />
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>
<script>
import systemApi from '@/api/system/system.js'
export default {
  props: ['materialDialog', 'materialType', 'type', 'materialDetail'],
  data() {
    return {
      headers: { Authorization: `Bearer ${this.$store.getters.token}` },
      dialogShow: false,
      materialForm: {
        material_no: '',
        material_name: '',
        material_link: '',
        material_cover: '',
        material_url: ''
      },
      material_cover: [],
      fileList: [],
      filesType: '',
      imgType: '',
      wordType: '',
      videoType: '',
      audioType: '',
      formRules: {
        material_name: [
          { required: true, message: '请输入素材名称', trigger: 'blur' }
        ],
        material_link: [
          { required: true, message: '请输入素材名称', trigger: 'blur' }
        ],
        material_url: [
          { required: true, message: '请输入使用网址', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    materialDialog: {
      handler(data) {
        this.dialogShow = data
        if (data) {
          switch (this.type) {
            case 1:
              this.filesType = this.imgType
              break
            case 2:
              this.filesType = this.videoType
              break
            case 3:
              this.filesType = this.audioType
              break
            case 4:
              this.filesType = this.wordType
              break
            default:
              break
          }
          this.$nextTick(() => {
            this.$refs.coverUpload.$refs.upload.handleRemove()
          })
        }
      },
      immediate: true
    },
    type: {
      handler(key) {
        if (key) {
          switch (key) {
            case 1:
              this.filesType = this.imgType
              break
            case 2:
              this.filesType = this.videoType
              break
            case 3:
              this.filesType = this.audioType
              break
            case 4:
              this.filesType = this.wordType
              break
            default:
              break
          }
        }
      },
      immediate: true
    },
    materialDetail: {
      handler(data) {
        if (data) {
          this.materialForm = data
        } else {
          this.materialForm = {
            material_no: '',
            material_name: '',
            material_link: '',
            material_cover: '',
            material_url: ''
          }
        }
      },
      immediate: true
    }
  },
  created() {
    this.getFilesType()
  },
  methods: {
    async getFilesType() {
      const res = await systemApi.sysList()
      if (res.code == 0) {
        this.imgType = res.data[1]?.children[3]?.value
        this.videoType = res.data[1]?.children[5]?.value
        this.audioType = res.data[1]?.children[7]?.value
        this.wordType = 'ttf,eot,woff,woff2'
      }
    },
    // 移除封面图片
    handleRemove() {
      this.$refs.coverUpload.$refs.upload.handleRemove()
      this.materialForm.material_cover = ''
      this.material_cover = []
    },
    // 封面上传成功
    success(file) {
      this.materialForm.material_cover = file.url
      this.material_cover = [{ name: file.name, url: file.url }]
    },
    // 素材上传成功
    handleUploadSuccess(res) {
      if (res.code == 0 || res.code == -200) {
        this.materialForm.material_link = res.data.url
      } else {
        this.$message.error(res.msg)
      }
    },
    handleBeforeUpload(file) {
      const reg = /([^.]+)$/
      const str = file.name.match(reg)[1]
      const arr = this.filesType.split(',')
      if (arr.indexOf(str + '') == -1) {
        this.$message.error('请更换格式为' + this.filesType + '的文件')
        return false
      }
    },

    handelExceed() {
      this.$message.error('最多只能上传一个文件')
    },

    submit() {
      if (this.materialType == 2) {
        this.materialForm.material_cover = this.material_cover[0]?.url
      }
      this.$emit('getMaterial', this.materialForm)
    },

    handleClose() {
      console.log('取消')
      this.$emit('update:materialDialog', false)
    }
  }
}
</script>
<style scoped lang="scss">
.material-cover {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.attachment_imgBox {
  position: relative;
}
.attachment_imgBox .img-actions {
  position: absolute;
  background: rgba($color: #000000, $alpha: 0.3);
  top: 0px;
  left: 0px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  opacity: 0;
  width: 80px;
  height: 80px;
}
.attachment_imgBox .img-actions > span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.attachment_imgBox .img-actions > span > i {
  color: #f00;
  font-size: 22px;
}
.attachment_imgBox:hover .img-actions {
  opacity: 1;
}
</style>
